<template>
	<view>
		<uni-calendar :ADate="ADate" :zcDates="zcDates" @change="doChangeCalender" @to-click="doClickCalender"></uni-calendar>
		
		<view class="uni-flex zcFlex_column card">
			<view class="uni-flex zcAlignI_center card_title zcJustifyC_between">
				<view class="">当月逾期：{{TaskMonthOverdueCount}}</view>
				<view class="">当月总跟进：{{TaskMonthTotalCount}}</view>
				<view class="">当月完成：{{TaskMonthCompletedCount}}</view>
			</view>
			<view class="uni-flex zcFlex_column card_content">
				<block v-for="(item,index) in tasks" :key="index">
					<view class="uni-flex zcAlignI_center iconfont" @tap="navtoTask(item)" :class="status?'icon-dian2':'icon-dian1'">
						<view class="">{{item.DueDate}}</view>
						<view class="">{{item.CustomerName}}</view>
						<view class="">{{item.CustomerTelephone}}</view>
					</view>
				</block>
			</view>
		</view>
		
	</view>
</template>

<script>
	let _this;
	import uniCalendar from '../../components/uni-calendar/uni-calendar.vue';
	
	
	export default {
		components:{
			uniCalendar
		},
		data() {
			return {
				status:false,
				year:'',
				month:'',
				day:'',
				newYear:'',
				newMonth:'',
				newDay:'',
				ADate:'',	// 打卡点
				zcDates:{
					year:'',
					month:'',
					data:[]
				},
				TaskMonthCompletedCount:0,	//当前月完成了的任务
				TaskMonthOverdueCount:0,	//当月逾期数量
				TaskMonthTotalCount:0,		//当月所有任务
				tasks:[],
				initTasks:[]
			}
		},
		onLoad() {
			let date = new Date();
			date = date.toJSON().split('T')[0];
			
			this.ADate = date;
			this.year = parseInt(date.split('-')[0]);
			this.month = parseInt(date.split('-')[1]);
			this.day = parseInt(date.split('-')[2]);
		},
		onShow() {
			this.zcQuerySalesMan4TraceTaskStatistic();
		},
		methods: {
			doChangeCalender(res) {
				this.ADate = res.fulldate;
				_this = this;
				
				_this.newYear = res.year;
				_this.newMonth = res.month;
				if (res.date<10) {
					_this.newDay = '0'+res.date;
				}else {
					_this.newDay = res.date;
				}
				
				_this.zcQuerySalesMan4TraceTaskStatistic();
			},
			doClickCalender(res) {
				if (this.ADate === res.fulldate) {
					return;
				}
				this.ADate = res.fulldate;
				_this.tasks = [];
				for (let i = 0; i < _this.zcDates.data.length; i++) {
					if (_this.zcDates.data[i].day == res.date) {
						_this.status = !_this.zcDates.data[i].isOverdue;
						for (let k = 0; k < _this.initTasks.length; k++) {
							if (_this.initTasks[k].DueDate == res.fulldate) {
								_this.tasks.push(_this.initTasks[k]);
							}
						}
					}
				}
			},
			navtoTask(item) {
				uni.navigateTo({
					url: '../visit_register/visit_register?TraceTaskSN='+item.SN
				});
			},
			zcQuerySalesMan4TraceTaskStatistic() {
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QuerySalesMan4TraceTaskStatistic',
						Data: {
							Calendar_Year:_this.newYear,
							Calendar_Month:_this.newMonth
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							//  每次切换月份 都要初始化任务栏数据为空
							_this.tasks = [];
							_this.zcDates.data = [];
							
							if (resjson.data !== null) {
								_this.TaskMonthCompletedCount = resjson.data.TaskMonthCompletedCount;	//当前月完成了的任务
								_this.TaskMonthOverdueCount = resjson.data.TaskMonthOverdueCount;	//当月逾期数量
								_this.TaskMonthTotalCount = resjson.data.TaskMonthTotalCount;		//当月所有任务
								_this.zcDates.year = _this.newYear;
								_this.zcDates.month = _this.newMonth;
								
								_this.initTasks = resjson.data.Tasks;
								if (resjson.data.CalendarData != null && resjson.data.CalendarData.length > 0) {
									for (let i = 0; i < resjson.data.CalendarData.length; i++) {
										let list = {
											day: ''+resjson.data.CalendarData[i].day,
											tast:''+resjson.data.CalendarData[i].value,
											isOverdue:true
										}
										
										// let item = {
										// 	month:_this.newMonth,
										// 	day:resjson.data.CalendarData[i].day,
										// 	value:resjson.data.CalendarData[i].value,
										// 	type:'逾期',
										// 	status:false
										// }
										if (_this.year === _this.newYear && _this.month === _this.newMonth && _this.day <= resjson.data.CalendarData[i].day) {
											// item.type = '跟进';	// 逾期 、 跟进
											// item.status = true;	// 逾期 、 跟进
											list.isOverdue = false;	// 逾期 、 跟进
										}
										if (_this.year === _this.newYear && _this.month < _this.newMonth) {
											// item.type = '跟进';	// 逾期 、 跟进
											// item.status = true;	// 逾期 、 跟进
											list.isOverdue = false;	// 逾期 、 跟进
										}
										if (_this.year < _this.newYear) {
											// item.type = '跟进';	// 逾期 、 跟进
											// item.status = true;	// 逾期 、 跟进
											list.isOverdue = false;	// 逾期 、 跟进
										}
										
										
										// _this.initTasks.push(item);
										_this.zcDates['isOverdue'] = true;
										_this.zcDates.data.push(list);
									}
									let newDate;
                                    if (_this.newMonth < 10) {
                                        newDate = _this.newYear+'-0'+_this.newMonth+'-'+_this.newDay;
                                    }else {
                                         newDate = _this.newYear+'-'+_this.newMonth+'-'+_this.newDay;
                                    }
									for (var i = 0; i < _this.initTasks.length; i++) {
										if (newDate == _this.initTasks[i].DueDate) {
											_this.tasks.push(_this.initTasks[i]);
										}
									}
									
								}
								
							}
						} else{
							
						}
						
					},
					Scope: this
				})
			}
			
			
		}
	}
</script>

<style>
	.card{box-shadow: 1upx 1upx 10upx 5upx #E5E5E5;border-radius: 10upx;margin: 40upx;background-color: #FFFFFF;}
	.card view{font-size: 26upx;}
	.card_title{padding: 20upx;color: #3CA4F9;border-bottom: 2upx solid #E5E5E5;}
	.card_content{padding: 0 20upx;color: #999999;}
	.card_content > view{padding: 20upx 0;display: flex;align-items: center;}
	.card_content > view > view{display: flex;align-items: center;margin: 0 6upx;}
	.card_content > view > view:first-child{padding-right: 20upx;}
	.icon-dian1:before{font-size: 34upx;content: '\e608';color: red;}
	.icon-dian2:before{font-size: 34upx;content: '\e608';color: #00BAAD;}
	
</style>
